<script setup>
import {ref, onMounted, defineExpose, defineEmits} from "vue";
import {listPatients, createVision, getVision, updateVision} from "@/api/eyeCare.js";
import { ElMessage } from 'element-plus'
import CheckboxButtonGroup from "@/components/CheckboxButtonGroup/index.vue"
import RadioButtonGroup from "@/components/RadioButtonGroup/index.vue"
import {
  USED_EYES_DURATION,
  SIT_TYPE,
  LIGHT_TYPE,
  WEAR_TYPE,
  ALLERGY,
  OUTDOOR_DURATION,
  GLASSES_TYPE,
  HABIT,
  OVERLAY_MEASURES
} from "@/utils/const.js";

const visible = ref(false)
const form = ref({
  patientId: '',
  healTime: null,
  note: ''
})
const loading = ref(false)
const patients = ref([])
const title = ref("新增")
const emit = defineEmits(['onConfirm'])
const leftVision = ref({
      type: 1,
      nakedVision: null,
      ocularAxis: null,
      sphericalMirror: null,
      cylinderMirror: null,
      horizontalKeratometry: null,
      verticalKeratometry: null,
      axisPosition: null
    }
)
const rightVision = ref({
      type: 2,
      nakedVision: null,
      ocularAxis: null,
      sphericalMirror: null,
      cylinderMirror: null,
      horizontalKeratometry: null,
      verticalKeratometry: null,
      axisPosition: null
    }
)
const negativeFactor = ref({
  usedEyesDuration: '',
  sitType: [],
  wearType: [],
  lightType: [],
  allergy: []
})
const prevention = ref({
  outdoorDuration: "",
  glassesType: "",
  habit: [],
  overlayMeasures: []
})

let isEdit = false
let visionId = ""

const initData = (id) => {
  if (id) {
    visionId = id
    isEdit = true
    getVision(id).then(resp => {
      if (resp.code === 0) {
        form.value.patientId = resp.data.patientId
        leftVision.value = resp.data.leftVision
        rightVision.value = resp.data.rightVision
        form.value.healTime = resp.data.healTime
        negativeFactor.value = resp.data.negativeFactor ? JSON.parse(resp.data.negativeFactor) : {
          usedEyesDuration: '',
          sitType: [],
          wearType: [],
          lightType: [],
          allergy: []
        }
        prevention.value = resp.data.prevention ? JSON.parse(resp.data.prevention) : {
          outdoorDuration: "",
          glassesType: "",
          habit: [],
          overlayMeasures: []
        }
        form.value.note = resp.data.note
      }
    })
  } else {
    visionId = ''
    isEdit = false
    form.value = {
      patientId: '',
      healTime: null,
      note: ''
    }
    leftVision.value = {
      type: 1,
      nakedVision: null,
      ocularAxis: null,
      sphericalMirror: null,
      cylinderMirror: null,
      horizontalKeratometry: null,
      verticalKeratometry: null,
      axisPosition: null
    }
    rightVision.value = {
      type: 2,
      nakedVision: null,
      ocularAxis: null,
      sphericalMirror: null,
      cylinderMirror: null,
      horizontalKeratometry: null,
      verticalKeratometry: null,
      axisPosition: null
    }
    negativeFactor.value = {
      usedEyesDuration: '',
      sitType: [],
      wearType: [],
      lightType: [],
      allergy: []
    }
    prevention.value = {
      outdoorDuration: "",
      glassesType: "",
      habit: "",
      overlayMeasures: ""
    }
  }
}

const handleSave = async () => {
  // await formRef.value.validate()
  let param = {
    id: visionId ? visionId : '',
    patientId: form.value.patientId,
    healTime: form.value.healTime,
    leftVision: leftVision.value,
    rightVision: rightVision.value,
    negativeFactor: JSON.stringify(negativeFactor.value),
    prevention: JSON.stringify(prevention.value),
    note: form.value.note
  }
  loading.value = true
  try {
    let resp
    if (!isEdit) {
      resp = await createVision(param)
    } else {
      resp = await updateVision(param)
    }
    if (resp.code === 0) {
      ElMessage.success(resp.message)
      localStorage.setItem("vision", JSON.stringify(param))
      visible.value = false
      emit('onConfirm')
    }
  } catch (error) {
    ElMessage.error(error.response.data.message)
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  listPatients().then(res => {
    patients.value = res.data
  })
})

const showDialog = (row) => {
  if (!row) {
    title.value = '新增'
  } else {
    title.value = '编辑'
  }
  visible.value = true
  initData(row?.id)
}

defineExpose({showDialog})
</script>

<template>
  <el-dialog :title="title" v-model="visible" >
    <el-form ref="formRef" :model="form" label-width="100px" label-position="left">
      <el-form-item label="就诊人">
        <el-select v-model="form.patientId" placeholder="请选择就诊人" filterable :disabled="isEdit">
          <el-option v-for="patient in patients" :key="patient.id" :label="patient.name + '(' + patient.birthday + ')'"
                     :value="patient.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="就诊时间">
        <el-date-picker v-model="form.healTime" value-format="YYYY-MM-DD"></el-date-picker>
      </el-form-item>
      <el-row>
        <el-col :span="12">左眼</el-col>
        <el-col :span="12">右眼</el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-input v-model="leftVision.nakedVision" type="number"></el-input>
        </el-col>
        <el-col :span="4">裸眼视力*</el-col>
        <el-col :span="10">
          <el-input v-model="rightVision.nakedVision" type="number"></el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-input v-model="leftVision.sphericalMirror" type="number"></el-input>
        </el-col>
        <el-col :span="4">散瞳/小瞳*</el-col>
        <el-col :span="10">
          <el-input v-model="rightVision.sphericalMirror" type="number"></el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-input v-model="leftVision.cylinderMirror" type="number"></el-input>
        </el-col>
        <el-col :span="4">散光</el-col>
        <el-col :span="10">
          <el-input v-model="rightVision.cylinderMirror" type="number"></el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-input v-model="leftVision.axisPosition" type="number"></el-input>
        </el-col>
        <el-col :span="4">轴位</el-col>
        <el-col :span="10">
          <el-input v-model="rightVision.axisPosition" type="number"></el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-input v-model="leftVision.ocularAxis" type="number"></el-input>
        </el-col>
        <el-col :span="4">眼轴*</el-col>
        <el-col :span="10">
          <el-input v-model="rightVision.ocularAxis" type="number"></el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-input v-model="leftVision.horizontalKeratometry" type="number"></el-input>
        </el-col>
        <el-col :span="4">K1 R1</el-col>
        <el-col :span="10">
          <el-input v-model="rightVision.horizontalKeratometry" type="number"></el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-input v-model="leftVision.verticalKeratometry" type="number"></el-input>
        </el-col>
        <el-col :span="4">K2 R2</el-col>
        <el-col :span="10">
          <el-input v-model="rightVision.verticalKeratometry" type="number"></el-input>
        </el-col>
      </el-row>
      <el-form-item label="日均用眼时长">
        <radio-button-group
            :options="USED_EYES_DURATION"
            v-model="negativeFactor.usedEyesDuration"
            type="danger"
        />
      </el-form-item>
      <el-form-item label="用眼姿势问题">
        <checkbox-button-group
            :options="SIT_TYPE"
            v-model="negativeFactor.sitType"
            :show-none-option="true"
            type="danger"
        />
      </el-form-item>
      <el-form-item label="光照情况">
        <checkbox-button-group
            :options="LIGHT_TYPE"
            v-model="negativeFactor.lightType"
            :show-none-option="true"
            type="danger"
        />
      </el-form-item>
      <el-form-item label="戴镜不正确">
        <checkbox-button-group
            :options="WEAR_TYPE"
            v-model="negativeFactor.wearType"
            :show-none-option="true"
            type="danger"
        />
      </el-form-item>
      <el-form-item label="过敏反应">
        <checkbox-button-group
            :options="ALLERGY"
            v-model="negativeFactor.allergy"
            :show-none-option="true"
            type="danger"
        />
      </el-form-item>

      <el-form-item label="日户外时长">
        <radio-button-group
            :options="OUTDOOR_DURATION"
            v-model="prevention.outdoorDuration"
            type="success"
        />
      </el-form-item>
      <el-form-item label="戴镜">
        <radio-button-group
            :options="GLASSES_TYPE"
            v-model="prevention.glassesType"
            type="success"
        />
      </el-form-item>
      <el-form-item label="戴镜习惯">
        <checkbox-button-group
            :options="HABIT"
            v-model="prevention.habit"
            :show-none-option="true"
            color="green"
        />
      </el-form-item>
      <el-form-item label="叠加措施">
        <checkbox-button-group
            :options="OVERLAY_MEASURES"
            v-model="prevention.overlayMeasures"
            :show-none-option="true"
            color="green"
        />
      </el-form-item>

      <el-form-item label="笔记">
        <el-input v-model="form.note" type="textarea"></el-input>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="handleSave"
        >确定</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.el-row {
  align-items: center;
  margin-bottom: 8px;
}

.el-col {
  text-align: center;
}

.el-input {
  width: 100%;
}
</style>